// src/components/work/WorkTaskList.tsx
import { BellOutlined, CalendarOutlined, HomeOutlined } from '@ant-design/icons';
import { Avatar, List, Typography } from 'antd';
import React from 'react';
import { useLocation } from 'react-router-dom';

const { Text } = Typography;

const data = [
  {
    icon: <img src="/021_待办事项.png" alt="待完成事项" style={{ width: '20px', height: '30px', marginTop: '-5px' }} />,
    title: '待完成事项·0',
  },
  {
    icon: <CalendarOutlined style={{ fontSize: '20px', color: '#1890ff' }} />,
    title: '待评审事项·0',
  },
  {
    icon: <BellOutlined style={{ fontSize: '20px', color: '#faad14' }} />,
    title: '待处理事项·0',
  },
];

const tasks = [
  {
    title: '我负责的事项',
    image: '/2.png', // 替换为实际图片路径
  },
  {
    title: '我创建的事项',
    image: '/3.png', // 替换为实际图片路径
  },
  {
    title: '我分配的事项',
    image: '/4.png', // 替换为实际图片路径
  },
  {
    title: '我关注的事项',
    image: '/5.png', // 替换为实际图片路径
  },
];

const membersData = [
  {
    name: '熊大',
    avatar: 'https://via.placeholder.com/150',
    department: '研发部',
    role: '工程师',
    status: '在线',
  },
  // 其他成员数据
];

const WorkTaskList: React.FC = () => {
  const location = useLocation();
  const isMembersPage = location.pathname === '/members';

  return (
    <div style={{ padding: '20px', backgroundColor: '#fff', minHeight: '100vh' }}>
      {isMembersPage ? (
        <div>
          <Text strong style={{ fontSize: '20px' }}>成员管理</Text>
          <List
            itemLayout="horizontal"
            dataSource={membersData}
            renderItem={member => (
              <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={member.avatar} />}
                  title={<Text strong>{member.name}</Text>}
                  description={`${member.department} - ${member.role}`}
                />
                <div>{member.status}</div>
              </List.Item>
            )}
          />
        </div>
      ) : (
        <div>
          <div style={{ marginBottom: '16px', borderBottom: '1px solid #EFEFEF', paddingBottom: '10px' }}>
            <Avatar size="large" style={{ backgroundColor: '#81E17E' }}>黄青</Avatar>
            <div style={{ display: 'inline-block', verticalAlign: 'middle' }}>
              <Text style={{ fontSize: '14px', marginLeft: '10px', color: '#3F3F3F' }}>黄青，下午好</Text>
              <br />
              <Text style={{ fontSize: '12px', color: '#888888', marginLeft: '10px' }}>今天是7月29日，星期一</Text>
            </div>
            <div style={{ marginTop: '20px', marginBottom:'20px', border: '1px solid #d3d3d3', display: 'inline-flex', alignItems: 'center', padding: '5px', borderRadius: '20px', marginLeft: '50px', height: '40px' }}>
              <span style={{ color: '#d3d3d3', fontSize: '30px', marginRight: '5px', marginBottom: '5px' }}>☺</span>
              <Text style={{ color: '#d3d3d3', cursor: 'pointer', fontSize: '16px' }}>设置状态</Text>
            </div>
          </div>
          
          <div style={{ marginBottom: '20px', display: 'flex', alignItems: 'center', color: '#1890ff',border: '1px solid #EBF0FC', backgroundColor: '#ebf0fc', padding: '5px 10px', borderRadius: '5px'}}>
            <HomeOutlined style={{ fontSize: '20px', color: '#6A9BFF', marginRight: '8px' }} />
            <Text strong style={{ fontSize: '16px', color: '#6A9BFF' }}>概览</Text>
          </div>
          <Text strong style={{ fontSize: '13px', display: 'block', color: '#9A9B9C' }}>待办</Text>
          <List
            itemLayout="horizontal"
            dataSource={data}
            renderItem={item => (
              <List.Item>
                <List.Item.Meta
                  avatar={item.icon}
                  title={<Text strong>{item.title}</Text>}
                />
              </List.Item>
            )}
          />
          <div style={{ marginTop: '20px' }}>
            <Text strong style={{ fontSize: '13px', display: 'block', color: '#9A9B9C' }}>我的</Text>
            {tasks.map(task => (
              <div key={task.title} style={{ display: 'flex', alignItems: 'center', marginTop: '10px' }}>
                <Avatar
                  src={task.image} // 使用自定义的图片
                  style={{ marginRight: '10px' }}
                />
                <Text>{task.title}</Text>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};

export default WorkTaskList;
